<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>胸腺外科管理系统</title>
    <link rel="stylesheet" href=".././bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .header {
            width: 100%;
            height: 100px;
            /*background-color: #2b669a;*/
            background-color: rgba(17,66,132,80%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
        .wrap {
            height: calc(100% - 100px);
            display: flex;
            padding-top: 10px;
            box-sizing: border-box
        }
        .sidebar{
            width: 150px;
            flex-shrink: 0;
            height: 100%;
            /*background-color: #2b669a;*/
            background-color: rgba(17,66,132,80%);
        }
        .right{
            flex: 1;
            overflow: auto;
            height: 100%;
        }
        a {
            display: block; /* 让 <a> 标签独占一行，便于排版 */
            padding: 10px 15px;
            margin: 30px 0; /* 增加上下间距 */
            text-decoration: none;
            border: 1px solid #4978a8;
            border-radius: 4px;
            border-radius: 5px;
            color: white;
            background-color: #4978a8; /* 改变背景颜色 */
            transition: all 0.3s ease; /*并添加过渡效果，使样式变化更平滑*/
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        a:hover {
            background-color: #96b9ce; /* 鼠标悬停时的背景颜色 */
            transform: translateY(-2px); /* 鼠标悬停时向上移动一点，增加交互感 */
        }

        a i {
            margin-right: 10px; /* 图标和文字之间的间距 */
        }

        iframe {
            width: 100%;
            width: 100%;
            height: 800px;
            border: none;
            display: none; /* 默认隐藏 iframe */
        }
        iframe.visible {
            display: block; /* 显示 iframe */
        }
        .sub-buttons {
            display: none;
            margin-left: 20px;
        }
        .sub-buttons a {
            margin: 10px 0;
        }
    </style>

</head>
<body>
<div class="header">
    <h1>欢迎<%=session.getAttribute("userAccount")%>来到胸腺外科管理系统</h1>
</div>
<div class="wrap">
    <div class="sidebar">
        <a href="#" class="btn" onclick="loadPage('../lian/YongHu.jsp')"><i class="fa fa-user"></i>用户管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-user"></i>用户管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/yonghuguanli.jsp')">添加</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/YongHu.jsp')">查询</a>--%>
    <%--    </div>--%>
        <a href="#" class="btn" onclick="loadPage('../lian/PaiBan.jsp')"><i class="fa fa-user"></i>科室管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-building"></i>科室管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub1.jsp')">副按钮1</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub2.jsp')">副按钮2</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub3.jsp')">副按钮3</a>--%>
    <%--    </div>--%>
        <a href="#" class="btn" onclick="loadPage('../lian/YiHu.jsp')"><i class="fa fa-user"></i>医护管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-users"></i>医护管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub1.jsp')">副按钮1</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub2.jsp')">副按钮2</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub3.jsp')">副按钮3</a>--%>
    <%--    </div>--%>
        <a href="#" class="btn" onclick="loadPage('../lian/BingFang.jsp')"><i class="fa fa-user"></i>病房管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-bed"></i>病房管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/bingfangguanli.jsp')">添加</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/BingFang.jsp')">查询</a>--%>
    <%--    </div>--%>
        <a href="#" class="btn" onclick="loadPage('../lian/YiZhu.jsp')"><i class="fa fa-user"></i>医嘱管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-book"></i>医嘱管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub1.jsp')">副按钮1</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub2.jsp')">副按钮2</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub3.jsp')">副按钮3</a>--%>
    <%--    </div>--%>
        <a href="#" class="btn" onclick="loadPage('../lian/BingLi.jsp')"><i class="fa fa-user"></i>病历管理</a>
    <%--    <a href="#" class="btn" onclick="toggleSubButtons(this)"><i class="fa fa-file-medical"></i>病历管理</a>--%>
    <%--    <div class="sub-buttons">--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub1.jsp')">副按钮1</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub2.jsp')">副按钮2</a>--%>
    <%--        <a href="#" class="btn" onclick="loadPage('../lian/sub3.jsp')">副按钮3</a>--%>
    <%--    </div>--%>
    </div>
    <div class="right">
        <iframe id="contentFrame" src=""></iframe>
    </div>
</div>
<script>
    function loadPage(url) {
        var iframe = document.getElementById('contentFrame');
        iframe.src = url;
        iframe.classList.add('visible');
    }
    function toggleSubButtons(button) {
        var subButtons = button.nextElementSibling;
        if (subButtons.style.display === 'block') {
            subButtons.style.display = 'none';
        } else {
            subButtons.style.display = 'block';
        }
    }
</script>
</body>
</html>





